<template>
  <div class="task_page">
    <div class="banner">
      <Imgt :src="props.newMemberTaskInfo.pic_link + lang + '.webp'" alt="" />
    </div>
    <div class="section">
      <div class="title">{{ t('tasks') }}</div>
      <div class="content">
        <div class="task_list">
          <div class="list_item" v-for="(item, index) in arr" :key="index">
            <img class="item_icon" :src="item.img" alt="" />
            <div class="item_content">
              <div class="item_title">{{ t(item.title) }}</div>
              <div class="item_text">{{ t(item.text) }}</div>
            </div>
            <n-button class="n-button" @click="itemHandler(item)">{{ item.status == 0 ? t('forward') :
              t('already_followed')
              }}</n-button>
          </div>
        </div>
      </div>
    </div>
    <div class="button_box">
      <n-button class="n-button" @click="onlineServiceHandler">{{ t('home_page_onlineService') }}</n-button>
    </div>
    <div class="section">
      <div class="title">{{ t('Task reward') }}</div>
      <div class="content">
        <div class="task_list">
          <div class="list_item">
            <img class="item_icon" src="/img/activity/money.webp" alt="" />
            <div class="item_content">
              <div class="item_title reward_money">{{ result.amount }}</div>
            </div>
            <n-button class="n-button reward" @click="receiveHandler">{{ result.status == 1 ? t('vip_collect') :
              t('received')
              }}</n-button>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="title">{{ t('Event content') }}</div>
      <div class="content event_content">
        <div>1. {{ t('newbie_content1') }}</div>
        <div>2. {{ t('newbie_content2') }}</div>
        <div>3. {{ t('newbie_content3') }}</div>
        <div>4. {{ t('newbie_content4') }}</div>
        <div>5. {{ t('newbie_content5') }}</div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import Imgt from '@/components/Imgt.vue';
import { onMounted, onUnmounted, reactive } from 'vue';

import { useI18n } from 'vue-i18n';
import { NetPacket } from '@/netBase/NetPacket.ts';
import { MessageEvent2 } from '@/net/MessageEvent2.ts';
import { NetMsgType } from '@/netBase/NetMsgType.ts';
import { Message } from '@/utils/discreteApi'
// import { useRoute, useRouter } from 'vue-router';
import H5Websocket from "@/net/Net1";
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import { handleOpenLink } from "@/utils/others";

const page = Page(pinia);
const { lang, settings, serviceUrlObj } = storeToRefs(page);


const { t } = useI18n();
const props = defineProps<{ newMemberTaskInfo: any }>();

const arr: any = reactive([
  {
    id: 1,
    link: 'Facebook Home page',
    img: '/img/activity/facebook.webp',
    title: 'task1',
    text: 'follow_up_facebook',
    status: 0,
  },
  {
    id: 2,
    link: 'Facebook group',
    img: '/img/activity/facebook_group.webp',
    title: 'task2',
    text: 'join_up_facebook_group',
    status: 0,
    url: '',

  },
  {
    id: 3,
    link: 'Telegram Channel',
    img: '/img/activity/telegram.webp',
    title: 'task3',
    text: 'join_up_telegram_group',
    status: 0,
    url: '',
  },
]);

const result: any = reactive({ // 结果
  amount: 0,
  is_bind_card: 0,
  is_open: 1,
  status: 0,
})
const itemHandler = (it: any) => {
  if (it.status == 0) {
    openLink(settings.value?.community_list?.filter((item: any) => item.name_key == it.link)[0])
  }
}
const openLink = (item: any) => {
  if (item.url) {
    handleOpenLink(item.url)
  }
}
const handleRes = (data: any) => {
  arr[0].status = data.is_follow_fb
  arr[1].status = data.is_follow_fb_group
  arr[2].status = data.is_follow_tg_group

  result.amount = data.amount
  result.is_bind_card = data.is_bind_card
  result.is_open = data.is_open
  result.status = data.status
}
const getNewbeesInfo = () => {
  const req = NetPacket.req_newbees_info();
  H5Websocket.sendMessageHandler(req);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_newbees_info,
    handleRes,
  );
}
const handleNewbeesPrize = (res: any) => {
  if (!res.rlt) return Message.success(t('receive_ok'))
}
const receiveHandler = () => {
  if (!result.status) return
  const req = NetPacket.req_newbees_prize();
  H5Websocket.sendMessageHandler(req);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_newbees_prize,
    handleNewbeesPrize,
  );
}
const handleOnlineCustomer = (res: any) => {
  if (res.rlt) return Message.error(t('check_anomaly'))
  handleOpenLink(serviceUrlObj.value.service_live_url)
}
const onlineServiceHandler = () => {
  const req = NetPacket.req_contact_customer_service();
  H5Websocket.sendMessageHandler(req);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_contact_customer_service,
    handleOnlineCustomer,
  );
}

onMounted(() => {
  getNewbeesInfo()
});

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_newbees_info, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_newbees_prize, null);
});
</script>

<style scoped lang="less">
.task_page {
  width: 100%;
  height: 100%;
  padding: 20px 0 30px;

  .banner {
    border-radius: 0;

    >img {
      width: 100%;
      height: 150px;
      border-radius: 6px;
      margin-bottom: 12px;
    }

    >span {
      font-size: 14px;
    }
  }

  .section {
    margin-bottom: 30px;

    .title {
      font-size: 20px;
      color: #FFFFFF;
    }

    .content {
      padding-top: 10px;

      &.event_content {
        padding: 10px 4px;
        font-size: 14px;
      }

      .task_list {
        .list_item {
          padding: 18px;
          width: 100%;
          display: flex;
          align-items: center;
          background: #121336;
          border-radius: 16px;
          border: 1px solid #26294C;

          .item_icon {
            width: 50px;
            height: 50px;
          }

          .item_content {
            flex: 1;
            padding-left: 20px;

            .item_title {
              font-size: 14px;
              background: radial-gradient(100% 103.23% at 50% 0%, #FFD91A 0%, #FFBB00 61.51%, #CC6600 98.5%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              color: transparent;

              &.reward_money {
                font-size: 20px;
              }
            }

            .item_text {
              font-size: 14px;
            }
          }

          .n-button {
            width: unset;
            min-width: 100px;
            height: 40px;
            font-size: 16px;

            &.reward {
              background: linear-gradient(180deg, #FFD200 0%, #CC6600 100%);
              color: #FFFFFF;
            }
          }

        }
      }

    }
  }

  .button_box {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;

    .n-button {
      height: 40px;
      width: 330px;
      font-size: 16px;
    }
  }
}
</style>
